<template>
  <div>
                  <ul>
                    <li v-for="m in messageList" :key="m.id">
                      <!--

                        依靠params传递参数，
                        需要去路由里配置。

                        这里占位是 :id 所以那边也是id
                      -->
                      <!-- <router-link 
                      :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp;
                     -->
                      <!--
                        
                        如果你希望使用params参数
                        一定，一定，一定不允许使用path
                        只能使用name
                      -->
                      <router-link :to="{
                        
                        name:'detailP',
                        params:{
                          id:m.id,
                          title:m.title
                        }
                      }">
                        {{m.title}}
                      </router-link>
                      <button @click="pushShow(m)">push查看</button>
                      <button @click="replaceShow(m)">replace查看</button>
                    </li>
                    
                  </ul>
                  <hr/>
                  <router-view></router-view>
                </div>
</template>

<script>
export default {
    name:'MessageComponent',
    methods: {
      pushShow(m){
        // 编程式路由导航
        // console.log(this.$router);
        // 之前学过push和replice，这也是这个道理，push可以指定去哪里跳
        // 里面的参数写的就是to里面写参数
        this.$router.push(
          {
                        
                        name:'detailP',
                        params:{
                          id:m.id,
                          title:m.title
                        }
                      }
        )
      },
      replaceShow(m){
        this.$router.replace(
          {
                        
                        name:'detailP',
                        params:{
                          id:m.id,
                          title:m.title
                        }
                      }
        )
      }
    },
    data(){
      return {
        messageList:[
          {id:'001',title:'消息001'},
          {id:'002',title:'消息002'},
          {id:'003',title:'消息003'}
        ]
      }
    },
    beforeDestroy() {
      console.log("123")
    }
}
</script>
